// 顶点着色器
const vs_s = `
  attribute vec4 a_Position;
  attribute vec2 a_TexCoord;
  varying vec2 v_TexCoord;
  void main() {
    gl_Position = a_Position;
    v_TexCoord = a_TexCoord;
  }
`;
// 片元着色器
const fs_s = `
  // 制定 float 的精度，如不制定，初始化 shader 时会出错
  precision mediump float;
  varying vec2 v_TexCoord;
  uniform sampler2D u_Sampler01;
  uniform sampler2D u_Sampler02;
  void main() {
    vec4 color01 = texture2D(u_Sampler01, v_TexCoord);
    vec4 color02 = texture2D(u_Sampler02, v_TexCoord);
    gl_FragColor = color01 * color02;
  }
`;

function main() {
  const canvas = document.getElementById('webgl');
  if (!canvas) {
    alert('Field to get canvas by id: webgl');
    return false;
  }
  const gl = canvas.getContext('webgl');
  if (!gl) {
    alert('Field to get webgl context for canvas.');
    return false;
  }
  if (!initShaders(gl, vs_s, fs_s)) {
    alert('Field to init shader.');
    return false;
  }
  const pointCount = initVertexBuffer(gl);
  if (pointCount < 0) {
    alert('Field to init vertex buffer.');
    return false;
  }
  if (!initTexture(gl, pointCount)) {
    alert('Field to init texture.');
    return false;
  }

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function initVertexBuffer(gl) {
  const vertices = new Float32Array([
    -1.0, +1.0, 0.0, +0.0, +1.0,
    -1.0, -1.0, 0.0, +0.0, +0.0,
    +1.0, +1.0, 0.0, +1.0, +1.0,
    +1.0, -1.0, 0.0, +1.0, +0.0,
  ]);

  // 创建 buffer
  const buffer = gl.createBuffer();
  if (!buffer) {
    alert('Field to create buffer');
    return -1;
  }
  // 绑定buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  // 写入数据
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const f_size = vertices.BYTES_PER_ELEMENT;

  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, f_size * 5, 0);
  gl.enableVertexAttribArray(a_Position);

  const a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f_size * 5, f_size * 3);
  gl.enableVertexAttribArray(a_TexCoord);

  return Math.ceil(vertices.length / 5);
}

function initTexture(gl, pointCount) {
  const texture01 = gl.createTexture();
  const u_Sampler01 = gl.getUniformLocation(gl.program, 'u_Sampler01');
  const texUnit01 = 0;
  const image01 = new Image();
  image01.onload = function () {
    loadTexture(gl, pointCount, texUnit01, texture01, u_Sampler01, image01);
  }
  image01.src = '../../resource/sky.jpg';

  const texture02 = gl.createTexture();
  const u_Sampler02 = gl.getUniformLocation(gl.program, 'u_Sampler02')
  const texUnit02 = 1;
  const image02 = new Image();
  image02.onload = function () {
    loadTexture(gl, pointCount, texUnit02, texture02, u_Sampler02, image02);
  }
  image02.src = '../../resource/circle.gif'

  return true;
}

const open_texUnits = [false, false];

function loadTexture(gl, pointCount, texUnit, texture, u_sampler, image) {
  // 对纹理图片进行Y轴反转
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  // 激活相应的纹理单元
  activeTexture(gl, texUnit);
  open_texUnits[texUnit] = true;
  // 绑定纹理
  gl.bindTexture(gl.TEXTURE_2D, texture);
  // 配置纹理参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // 配置纹理图像
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  gl.uniform1i(u_sampler, texUnit);

  if (open_texUnits[0] && open_texUnits[1]) {
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, pointCount);
  }
}

function activeTexture(gl, unit) {
  if (0 === unit) {
    gl.activeTexture(gl.TEXTURE0);
  } else if (1 === unit) {
    gl.activeTexture(gl.TEXTURE1);
  }
}